
<{include file="www/header.tpl"}>
<{include file="www/header-base.tpl"}>

<link rel="stylesheet" href="/resource/kalendae/build/kalendae.css" type="text/css" charset="utf-8">
<!--
<script src="src/moment.js" type="text/javascript" charset="utf-8"></script>
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>
-->
<script src="/resource/kalendae/build/kalendae.activity.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
/** 表格样式 **/
.datesel { background-color: #eee; display: inline-block; width: 480px;border: 1px solid  #e5e5e5;  }
.tbcal { width: 100%;  }
.tbcal .left { width: 30%; }
.tbcal .right{ position: relative; width: 70%;  }
.kalendae .k-days span.closed {
	background:red;
}
.datesel .left .time { padding-left: 20px; color: #898989; font-size: 14px; }
.datesel .left .time input { display: block; width: 134px; height: 40px; background: #fff url(/resource/www/imgs/date_icon.png) no-repeat 10px 6px; padding-left: 40px; }

.kalendae .k-calendar { width: 290px; }
.k-title { position: relative; }
.k-title .k-caption { position: relative; top: 0px ; }
.kalendae .k-title, .kalendae .k-header, .kalendae .k-days { width: 266px; text-align: center; margin: 0 auto; }
.kalendae .k-days span { background: #fff; width: 34px; height: 34px; line-height: 34px; text-align: center; padding: 0; margin: 2px; }
.kalendae .k-header span {  width: 36px; height: 36px; line-height: 36px; text-align: center; }

.kalendae .k-caption {  font-weight: bold; font-size: 18px;   color: #262626;}

.tbcal .mulcal {  width: 290px; position: relative;}


.kalendae .k-days span.k-in-month,
.kalendae .k-days span.k-out-of-month { background: #ccc; color: #fff; }
.kalendae .k-days span.k-in-month.k-active { background: #fff; color: #444; }
.kalendae .k-days span.k-selected.k-active {  background: #2cda98; color: #fff; }


.right .cal-btn-prev { cursor: pointer; position: absolute; width: 26px; height: 26px; left: 285px; top: 71px; background: url(/resource/www/imgs/rili_up.png) no-repeat; }
.right .cal-btn-next { cursor: pointer; position: absolute; width: 26px; height: 26px; left: 285px; bottom: 16px; background: url(/resource/www/imgs/rili_down.png) no-repeat; }

#readonly-box { clear: both; display: none; max-width: 600px;}
</style>

<div class="base-banner-wrap">
    <img src="<{$activity.bannerUrl}>" class="base-banner">
</div>
<div class="huod_lux fix">

    <div class="main">
        <h2 class="title"><{$activity.name}></h2>
        <div class="user-info fix">

            <div class="left">
                <img src="<{$activity.guider.userIcon}>" class="img">
            </div>
            <div class="right">
                <div class="one">
                    <strong class="name"><{$activity.guider.realName}></strong>
                    <{if  $activity.guider.identityActive == 1}>
                <img src="/resource/www/imgs/correct_icon.png" class="yiyz">
                    <span class="text">身份已验证</span>
                    <{/if}>
                    <{if  $activity.guider.telActive == 1}>
                <img src="/resource/www/imgs/correct_icon.png" class="yiyz">
                    <span class="text">电话已验证</span>
                    <{/if}>
                </div>
                <div class="two">
                    <span class="local"> 居住地：<{$activity.guider.resideCity}> </span>
                </div>
                <div class="two">
                    <span class="time">居住时间：<{$activity.guider.resideTime}></span>
                </div>
                <div class="sex-banner">
                   <{if $activity.guider.userAge}>
                   <span class="data-lable"> <{$activity.guider.userAge}></span>
                   <{/if}>
                   <span class="data-lable"> <{if $activity.guider.userGender == 'm'}>男<{else}>女<{/if}></span>
                   <{if $activity.guider.identityName}>
                   <span class="data-lable"> <{$activity.guider.identityName}></span>
                   <{/if}>
                </div>
                <div class="school-banner">
                   <{if $activity.guider.identityErea_zhuanye}>
                   <span class="data-lable"> <{$activity.guider.identityErea_zhuanye}>专业</span>
                   <{/if}>
                   <{if $activity.guider.identityErea_school}>
                   <span class="data-lable"> <{$activity.guider.identityErea_school}></span>
                   <{/if}>      
                </div>
                <p class="four"> <{$activity.guider.introduction|nl2br}></p>
            </div>
        </div>

        <h3 class="subtitle">活动信息</h3>

        <div class="info-box">
            <p class="line fix">
                <span class="span">活动时长</span>
                <em class="tian"><{$activity.hours}>小时</em>
            </p>
            <p class="line fix">
                <span class="span">可接待人数</span>
                <em class="number"><{$activity.serviceMaxPersons}>人</em>
            </p>
            <p class="line fix">
                <span class="span">集合地点</span>
                <em class="jih"><{$activity.location}></em>
            </p>
            <div class="fix" id="map-container" style="width: 760px;height: 200px;margin: 10px 70px 20px;border: 1px dotted rgb(70, 208, 139);background: url('/resource/www/imgs/map-preview.png') 316px 36px no-repeat;"></div>
            <p class="line fix">
                <span class="span">活动介绍</span>
                <em class="txt"><{$activity.summary|@nl2br}></em>
            </p>
            <p class="line fix">
                <span class="span">行程安排</span>
                <em class="txt"><{$activity.todolist|@nl2br}></em>
            </p>
        </div>

        <ul class="imglist fix">
            <{foreach from=$activity.images item="imagesrc"}>
            <li class="li">
                <img src="<{$imagesrc}>" class="img">
            </li>
            <{/foreach}>

        </ul>
        <h3 class="subtitle">价格</h3>

        <div class="info-box">
            <ul class="hang">
                <li class="li">
                    <p class="p fix">
                        <span class="span">活动价格</span>
                        <em class="piaow"><{$activity.priceService/100}>€/ 人</em>
                    </p>
                    <p class="p fix">
                        <span class="span">费用描述</span>
                        <em class="wenz"><{$activity.descService|nl2br}></em>
                    </p>
                </li>
            </ul>
        </div>

        <h3 class="subtitle" style="margin-bottom: 0;">评价</h3>

        <{if $counts == 0}>
        <span class="no-pj"> 暂无评价 </span>
        <{else}>
        <ul class="commentlist">


            <{foreach from=$comments item=v}>
            <li class="li fix">
                <div class="left">
                    <img src="<{$v.userIcon}>" class="img">
                </div>
                <div class="right">
                    <p class="one">
                        <{$v.userName}>
                        <span class="date"><{$v.created}></span>
                    </p>
                    <p class="two"><{$v.comments}>
                    <div class="imgs">
                        <{foreach from=$v.tourist_pic item=j}>
                        <a target="_blank" href="<{$j}>"><img src="<{$j}>"></a>
                        <{/foreach}>
                    </div>
                    </p>
                </div>

            </li>
            <{/foreach}>

        </ul>

        <a href="/activity/get_more/2?id=<{$activity.id}>" next="2" onclick="return false" id="get_more" class="get-more-pj">查看更多评价</a>
        <{/if}>


    </div>
    <div class="sidebar">
        <form action="/order/add/activity" method="POST" onsubmit="return form_submit_activity(this)">

        <h3 class="title"><{$activity.name}></h3>
        <ul class="timebox fix">
            <li class="li">
                <p class="p">活动日期</p>
                <input name="startDay"  class="input" id="startDay">
            </li>
            <li class="li">
                <p class="p"></p>
            </li>
            <li class="li">
                <p class="p">人数</p>
                <select name="persons" class="input" onchange="zongjia_changed(this)">
                    <{foreach from=$personList item=countPerson}>
                    <option value="<{$countPerson}>"><{$countPerson}> 位游客</option>
                    <{/foreach}>
                </select>
            </li>
        </ul>
        <h2 class="zongj">
            总价: <strong class="strong"><{$activity.priceService/100*1.1|round:2}></strong>
            €
        </h2>
            <input type="hidden" name="goodsId" value="<{$activity.id}>">
            <{if $global_user.userUid > 0}>
            <input class="shenq" type="submit" name="submit" value="申请预约" onclick="return submit_huod_lux();">
            <{/if}>
        </form>
        <{if $global_user.userUid > 0}>
        <a href="/chat/with/<{$activity.uid}>" class="lianx-dy" onclick="return contact()">联系玩伴</a>
        <{else}>
        <a class="shenq" onclick="showBox($('.login-wrap'), $('.alert-bg'));$('body,html').animate({scrollTop:0},0);">登录后申请预约</a>
        <{/if}>
    </div>

</div>

<script type="text/javascript" src="http://maps.google.cn/maps/api/js?key=AIzaSyCXDeoGjdaJoF22xDyU0L-cugypMDjxQJY"></script>
<script type="text/javascript">
function ParseLocation(location) {

    var lat = location.lat().toString().substr(0, 12);
    var lng = location.lng().toString().substr(0, 12);
    console.log("lat:"+lat+"lng:"+lng);
    
    var myplace,infowindow,marker;
    var myLatlng=new google.maps.LatLng(lat,lng);
    var mapOptions = {
        center: myLatlng,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map-container"),
            mapOptions);
    
    marker = new google.maps.Marker({
        map: map,
        position: myLatlng
    });
    
    infowindow = new google.maps.InfoWindow({
    	content:"集合地点"
    });
    infowindow.open(map,marker);

}

//初始化地图
var loc=new google.maps.LatLng('<{$activity.lat}>','<{$activity.lng}>');
ParseLocation(loc);

</script>

<script type="text/javascript">
var sidebarOY=$("div.sidebar").offset().top;
var sidebarOX=$("div.sidebar").offset().left;;
$(window).scroll(function(){
            var sidebarY = sidebarOY-$(this).scrollTop();
              if(sidebarY<=0){
            $("div.sidebar").css({"position":"fixed","top":10,"left":sidebarOX});
            }else if(sidebarY>0){
            $("div.sidebar").css({"position":"static","float":"left"});
           }});
</script>
<script>
function form_submit_activity(formItem)
{
    <{if $activity.uid == $global_user.userUid}>
        layer.tips("导游不能对自己的活动下单", formItem);
        return false;
    <{else}>
        return true;
    <{/if}>
}

    function contact(){
    <{if $activity.uid == $global_user.userUid}>
        layer.msg("不能联系自己");
        return false;
    <{else}>
        return true;
    <{/if}>

    }

    $(function() {
        var more = $("#get_more");
        more.click(function(){
            var url = more.attr("href");

         $.ajax({
                type : "get",
                url : url,
                success : function(response) {
//                    console.log(response);
                    if(response){
                        $('.commentlist').append(response);
                        var next = more.attr('next');
                        var next_url = '/activity/get_more/'+(++next)+'?id='+<{$activity.id}>;
                        more.attr('href',next_url);
                        more.attr('next',next);
                    }else{
                        more.hide();

                    }

                }
            });
        });
    });


var global_kal = null;
var global_kal_readonly = null;
var guiderFreeDays   = {
    <{foreach from=$guiderFreeDays key=day item=countsPerson}>
    '<{$day}>' : <{$countsPerson}>,
    <{/foreach}>
};

function getWeeklyDatesBetweenDays (day1, day2, wDay)
{
    if (wDay == '周日')
        iW = 0;
    else if (wDay == '周一')
        iW = 1;
    else if (wDay == '周二')
        iW = 2;
    else if (wDay == '周三')
        iW = 3;
    else if (wDay == '周四')
        iW = 4;
    else if (wDay == '周五')
        iW = 5;
    else if (wDay == '周六')
        iW = 6;

    d1 = new Date(day1);
    d2 = new Date(day2);
    dx = d1;
    i  = 0;

    global_kal.setSelected();

    for (; dx.getTime() <= d2.getTime(); i = i + 1 )
    {
        if (dx.getDay() == iW)
        {
            global_kal.addSelected(dx.toDateString());
        }

        dx.setTime(dx.getTime() + 86400000);
    }

    global_kal.draw();
}

$(document).ready(function () {

		global_kal = new Kalendae.Input('startDay', {
            attachTo: document.getElementById("startDay"),
			months:1,
            weekStart: 1,
			mode:'single',
            useYearNav: false,
            columnHeaderFormat: "dd",
            titleFormat: "YYYY年MM月",
            format: 'YYYY-MM-DD',
            disableNextMonth: true,
            blackout : function (x) {

                for (var i in guiderFreeDays)
                {
                    var x1 = Kalendae.moment(i);
                    var x2 = Kalendae.moment(i);
                    x2.add(1, 'days');
                    if (x.isBetween(x1, x2))
                        return false;
                }

                return true;
            },

            'subscribe' : {
                'date-clicked' : function (date) {
                    var strDay = date.format("YYYY-MM-DD");
                    check_left_persons(strDay);
                }
            },
		});

        //global_kal.viewStartDate = Kalendae.moment('<{$activity.startDay}>');
        global_kal.draw();

});

function cal_next_month ()
{
    global_kal.viewStartDate.add(1, 'months');
    global_kal.draw();
}

function cal_prev_month ()
{
    global_kal.viewStartDate.subtract(1, 'months');
    global_kal.draw();
}

function cal_show_result ()
{
    // 清空内部内容
    global_kal_readonly = null;
    $('#readonly-box').html('');

    var d1 = Kalendae.moment($('input[name=startDay]').val());
    var d2 = Kalendae.moment($('input[name=stopDay]').val());

    var countsMonth = 1;
    var currMonth   = d1.month();
    while (d1.isBefore(d2))
    {
        if (d1.month() != currMonth)
        {
            currMonth    = d1.month();
            countsMonth += 1;
        }

        d1.add(1, 'days');
    }

	global_kal_readonly = new Kalendae({
		attachTo: document.getElementById("readonly-box"),
		months:countsMonth,
        columnHeaderFormat: "dd",
        titleFormat: "YYYY年MMM",
        useYearNav: false,
		mode:'multiple',
		//selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
        selected: global_kal.getSelected(),
	});

    var w = $('#readonly-box').width();
    var h = $('#readonly-box').height();
    layer.open({
        type: 1,
        title: false,
        area: [w, h],
        content: $('#readonly-box'),
    });
}

</script>

<script>

function submit_huod_lux() {
    var ostartDay = $("input[name='startDay']").val();
    if (!$.trim(ostartDay)) {
        layer.msg('请输入活动时间');
        return false;
    }

    var oPersons = $("select[name='persons']").val();
    var oNumberReg =  /^[0-9]*[1-9][0-9]*$/;
    if (!$.trim(oPersons) || !oNumberReg.test($.trim(oPersons)) ) {
        layer.msg('请输入正确的人数');
        return false;
    }

    var leftPersons = guiderFreeDays[ostartDay];
    if (leftPersons < oPersons)
    {
        layer.msg('只剩余' + leftPersons + '位，不能下单，请重新选择!');
        return false;
    }

    return true;
}

function check_left_persons (ostartDay)
{
    var oPersons = $("select[name='persons']").val();
    var leftPersons = guiderFreeDays[ostartDay];
    if (leftPersons < oPersons)
    {
        layer.msg('只剩余' + leftPersons + '位，不能下单，请重新选择!');
    }
    else
    {
        var nLeft = leftPersons - oPersons;
        layer.msg('剩余' + nLeft + '位');
    }
}


function zongjia_changed (selitem)
{
    var persons = $(selitem).val();
    var price   = <{$activity.priceService/100}>;
    price = persons * price * 1.1;
    price = price.toFixed(2);
    $('.zongj strong').html(price);
}

</script>

<{include file="www/footer.tpl"}>
